import styled from "@emotion/styled"
import Svg from "@/components/base/Svg"
import { Invalid } from "./WelfareBonusCard"
import { useState, useMemo } from "react"

const subtaactCheckedSvg = (
    <Svg
        className="root-bg"
        preserveAspectRatio="none"
        src="pages/Walfare/svg/subtract_checked.svg"
    />
)
const subtaactSvg = (
    <Svg
        className="root-bg"
        preserveAspectRatio="none"
        src="pages/Walfare/svg/subtract.svg"
    />
)

/**
 * 优惠券卡片属性接口
 */
type CouponCardProps = {
    /** 是否启用选中功能 */
    useChecked?: boolean
    /** 选中状态改变时的回调函数 */
    onChange?: (checked: boolean) => void
}

/**
 * 优惠券卡片根容器
 * 包含左侧金额区域和右侧详情区域
 */
const Root = styled.div`
    position: relative;
    height: 80rem;
    width: 100%;
    padding: 8rem;
    display: flex;
    .root-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -2;
    }
    // 左侧金额区域
    & > .left {
        width: 29.7%;
        border-right: 0.5rem dashed #ffadb5;
        text-align: center;
        padding-right: 8rem;
        // 金额显示
        & > div {
            height: 32rem;
            line-height: 32rem;
            font-size: 22rem;
            color: #f50016;
            font-weight: 500;
        }
        // 金额说明文字
        & > span {
            line-height: 16rem;
            font-size: 12rem;
            font-weight: 400;
            color: #f50016;
        }
        // 选中状态图标
        .checked {
            width: 24rem;
            height: 20rem;
            position: absolute;
            z-index: -1;
            right: 0;
            bottom: 2rem;
            .checked-bg-svg {
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
            }
            .dui-hao-svg {
                position: absolute;
                width: 10rem;
                height: 6rem;
                left: 12rem;
                top: 10rem;
            }
        }
    }
    // 右侧详情区域
    & > .right {
        margin-left: 9rem;
        color: #f50016;
        // 上限金额
        .capped {
            margin-top: 2rem;
            height: 20rem;
            line-height: 20rem;
            font-size: 14rem;
            font-weight: 500;
            display: flex;
            gap: 8rem;
            .left,
            .right {
                color: #f50016;
            }
        }
        // 最低存款要求
        .min-deposit {
            font-weight: 400;
            font-size: 12rem;
            margin-bottom: 12rem;
            height: 16rem;
        }
    }
`

/**
 * 优惠券卡片组件
 * @param props - 组件属性
 */
export default function CouponCard(props: CouponCardProps) {
    const { useChecked = false, onChange } = props
    const [checked, setChecked] = useState(false)

    const rootBg = useMemo(() => (checked ? subtaactCheckedSvg : subtaactSvg), [checked])
    return (
        <Root
            onClick={() => {
                if (!useChecked) return
                setChecked(!checked)
                onChange?.(!checked)
            }}
            className="coupon-card"
        >
            {rootBg}
            {/* 左侧金额区域 */}
            <div className="left">
                <div>
                    <span className="unit">₱</span>
                    <span className="bonus">777</span>
                </div>
                <span>First Top-up Bonus</span>
                {checked && (
                    <span className="checked">
                        <Svg
                            className="checked-bg-svg"
                            preserveAspectRatio="none"
                            src="pages/Walfare/svg/checked.svg"
                        />
                        <Svg
                            className="dui-hao-svg"
                            preserveAspectRatio="none"
                            src="pages/Walfare/svg/duihao.svg"
                        />
                    </span>
                )}
            </div>
            {/* 右侧详情区域 */}
            <div className="right">
                <div className="capped">
                    <span className="left">Capped at</span>
                    <span className="right">₱ 777</span>
                </div>
                <div className="min-deposit">Minimum top-up ₱100 to opt in</div>
                <Invalid />
            </div>
        </Root>
    )
}
